<template>
  <div>
    <div><i class="el-icon-star-on"></i>基础信息</div>
    <div class="flex">
      <!-- <div class="imgbox mt20">
                <img :src="ListData.headImg | formatImg" alt="">
            </div> -->
      <div class="flex3">
        <r-list
          :ColsNum="3"
          :width="120"
          :ListCols="ListCols"
          ListType="Info"
          :ListData="ListData"
        ></r-list>
      </div>
    </div>
    <div class="flex_aj sb mt60 mb20">
      <div class="pw40 ">
        <div class="mtb20 "><i class="el-icon-star-on"></i>设备信息</div>
        <r-table
          :tableData="tableDataShebei"
          :tableCols="tableColsShebei"
          :height="tableDataShebei.length * 107 + 45"
        ></r-table>
      </div>
      <div class="pw40">
        <div class="mtb20"><i class="el-icon-star-on"></i>工单信息</div>
        <r-table
          :tableData="tableDataGongdan"
          :tableCols="tableColsGongdan"
          :height="tableDataGongdan.length * 107 + 45"
        ></r-table>
      </div>
    </div>
    <div><i class="el-icon-star-on mt60 mb20"></i>工单列表</div>
    <ListWork />
    <div><i class="el-icon-star-on mt60 mb20"></i>激活信息</div>
    <ListFocus />
  </div>
</template>
<script>
import ListWork from "./ListWork.vue";
import ListFocus from "./ListFocus.vue";
export default {
  data() {
    return {
      //基础信息
      ListCols: [
        [
          // {
          //     label: 'headimg',
          //     prop: 'headimg',
          //     hiddenHead: true
          // },
          {
            label: "Maintenance员Name",
            prop: "name"
          },
          {
            label: "登录账号",
            prop: "account"
          },
          {
            label: "联系方式",
            prop: "phone"
          },
          {
            label: "账号Status",
            prop: "state",
            formatter: e =>
              e.state == 1 ? "Enable" : e.state == 2 ? "Forbidden" : ""
          },
          {
            label: "Creation Time",
            prop: "createdTime"
          }
        ]
      ],
      ListData: {},
      //费用信息Data
      ListDataFeiyong: {
        total: "123",
        discount: "123",
        payPrice: "123",
        returnPrice: "",
        returnTime: "123"
      },
      //费用信息
      ListColsFeiyong: [
        [
          {
            label: "商品合计",
            prop: "total"
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
          },
          {
            label: "优惠Money",
            prop: "discount"
          },
          {
            label: "应付款Money",
            prop: "payPrice"
          },
          {
            label: "退款Money",
            prop: "returnPrice",
            type: "button",
            btnList: [
              {
                label: "退款",
                type: "primary",
                handle: e => this.showFrom(),
                isShow: false
              }
            ]
          },
          {
            label: "退款时间",
            prop: "returnTime"
          }
        ]
      ],
      //订单分成利润
      ListDataFencheng: {
        total: "123",
        costTotal: "123",
        orderProfit: "123",
        scalePrice: "123",
        operationProfit: "123",
        agentProfit: "123",
        sallerProfit: "123"
      },
      //订单分成利润信息
      ListColsFencheng: [
        [
          {
            label: "商品合计",
            prop: "total"
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
          },
          {
            label: "商品成本合计",
            prop: "costTotal"
          },
          {
            label: "订单利润",
            prop: "orderProfit"
          },
          {
            label: "分成Money",
            prop: "scalePrice"
          },
          {
            label: "Operator分成",
            prop: "operationProfit"
          },
          {
            label: "Agent分成",
            prop: "agentProfit"
          },
          {
            label: "商家分成",
            prop: "sallerProfit"
          },
          {
            label: "-",
            prop: " "
          }
        ]
      ],
      //订单售后Data
      ListDataShouhou: {
        content: "未收到",
        servePic: [
          "http://photo.16pic.com/00/01/11/16pic_111395_b.jpg",
          "http://photo.16pic.com/00/86/85/16pic_8685056_b.jpg"
        ],
        cTime: "2020-02-02",
        serveStatus: "未处理",
        handleResult: "Review Pass",
        handleTime: "2020-02-02"
      },
      //订单售后信息
      ListColsShouhou: [
        [
          {
            label: "反馈内容",
            prop: "content"
            // theme: e => e.status ? 'primary' : 'danger', type: "tag",
          },
          {
            label: "售后图片",
            prop: "servePic",
            type: "img",
            imglook: true
          },
          {
            label: "Application Time",
            prop: "cTime"
          },
          {
            label: "处理Status",
            prop: "serveStatus"
          },
          {
            label: "处理结果",
            prop: "handleResult",
            type: "button",
            btnList: [
              {
                label: "处理",
                type: "primary",
                handle: e => this.showFrom(),
                isShow: false
              }
            ]
          },
          {
            label: "处理时间",
            prop: "handleTime"
          }
        ]
      ],
      //称波动RecordData
      tableDataBodong: [
        {
          doorId: "123",
          weighId: "123",
          goodsName: "123",
          goodsType: "123",
          weighChange: "123",
          cTime: "123"
        }
      ],
      //称波动Record信息
      tableColsBodong: [
        {
          label: "门编号",
          prop: "doorId"
        },
        {
          label: "称编号",
          prop: "weighId"
        },
        {
          label: "商品Name",
          prop: "goodsName"
        },
        {
          label: "重量变化(g)",
          prop: "weighChange"
        },
        {
          label: "Creation Time",
          prop: "cTime"
        }
      ],
      // 设备Data
      tableDataShebei: [
        {
          deveceType: "123",
          deviceNum: "123"
        }
      ],
      // 设备信息
      tableColsShebei: [
        {
          label: "设备Type",
          prop: "deveceType"
        },
        {
          label: "设备数量",
          prop: "deviceNum"
        }
      ],
      // 工单Data
      tableDataGongdan: [],
      // 工单信息
      tableColsGongdan: [
        {
          label: "工单Status",
          prop: "wordOrder"
        },
        {
          label: "数量",
          prop: "orderNum"
        }
      ],
      //合计栏
      formData: {
        orderPrice: "",
        returnPrice: ""
      },
      formCols: [
        {
          type: "readonly",
          label: "订单PaymentMoney",
          width: 350,
          prop: "orderPrice"
        },
        { type: "input", label: "退款Money", width: 350, prop: "returnPrice" }
      ],
      formRules: {
        orderPrice: [{ required: false, message: "", trigger: "blur" }],
        returnPrice: [
          { required: true, message: "Please Input退款Money", trigger: "blur" }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  components: {
    ListWork,
    ListFocus
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let res = await this.api.getopinfo(this.$route.query.id);
      if (res) {
        this.ListData = res.data.opEntity;
        this.tableDataShebei = [
          {
            deveceType: "自提柜",
            deviceNum: res.data.opEntity.ebNum
          },
          {
            deveceType: "组合柜",
            deviceNum: res.data.opEntity.cbNum
          },
          {
            deveceType: "生鲜柜",
            deviceNum: res.data.opEntity.eqNum
          }
        ];
        // console.log(this.ListData);
        this.tableDataGongdan = [
          {
            wordOrder: "已处理",
            orderNum: res.data.handleNums
          },
          {
            wordOrder: "总订单数",
            orderNum: res.data.totalNums
          },
          {
            wordOrder: "未处理",
            orderNum: res.data.unHandleNums
          }
        ];
      }
      let res2 = await this.api.errlist({ optorId: this.ListData.id });
    },
    showFrom() {
      this.$prompt(
        `Please Input退款Money(PaymentMoney:${this.ListData.payMoney})`,
        "Hint",
        {
          confirmButtonText: "Confirm",
          cancelButtonText: "Cancel",
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: "邮箱格式不正确"
        }
      )
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "退款Success"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "Cancel输入"
          });
        });
    }
  }
};
</script>
<style scoped lang="scss">
.pw40 {
  width: 45%;
}
.imgbox {
  border: 1px solid #ebeef5;
  border-right: none;
  flex: 1;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  img {
    width: 200px;
    height: 200px;
  }
}
</style>
